<template>
    <div class="container">
        <div class="opertion">
            <a-button type="primary">全部库存</a-button>
            <a-button type="default">库存盘点</a-button>
            <a-button type="default">库存预警</a-button>
            <a-button type="default">预警单入库</a-button>
            <a-button type="default">手动入库</a-button>
            <a-button type="default">手动出库</a-button>
            <a-button type="default">采购单入库</a-button>
            <a-button type="default">连锁调拨</a-button>
            <a-button type="default">库存记录</a-button>
        </div>
        <div class="search">
            <a-button type="default">负库存矫正</a-button>
            <a-button type="default">供应商档案</a-button>
            <a-button type="default">导出模版</a-button>
            <a-button type="default">导入商品</a-button>
            <a-button type="default">清空库存</a-button>
            <a-button type="default">手机版下载</a-button>
            <a-input-search placeholder="条形码/名字/首字母" />
        </div>
        <a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 560 }" style="margin-top:16px"
            :row-selection="rowSelection">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'goods'">
                    <div style="display:flex;align-items:center;">
                        <img src="@/assets/images/439577567.png" alt="" width="44" height="44" object-fit="cover"
                            style="background-color:#f2f2f2;border-radius:2px">
                        <div style="margin-left:6px">
                            <div>{{ record.name }}</div>
                            <div class="stock">{{ record.order_no }}</div>
                        </div>
                    </div>
                </template>
                <template v-if="column.key === 'action'">
                    <a-button size="small">编辑</a-button>
                    <a-button size="small">删除</a-button>
                </template>
            </template>
            <template #footer>
                <a-button>批量删除</a-button>&nbsp;
                <a-button>批量转移</a-button>
            </template>
        </a-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
    {
        name: 'id',
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 60
    },
    {
        name: 'goods',
        title: '商品名称/条码',
        dataIndex: 'goods',
        key: 'goods'
    },
    {
        name: 'unit',
        title: '商品单位',
        dataIndex: 'unit',
        key: 'unit',
        width: 90,
        align: 'center'
    },
    {
        name: 'price',
        title: '平均进价',
        dataIndex: 'price',
        key: 'price',
        width: 100
    },
    {
        name: 'sale_price',
        title: '零售价',
        dataIndex: 'sale_price',
        key: 'sale_price',
        width: 100
    },
    {
        name: 'profit',
        title: '毛利',
        dataIndex: 'profit',
        key: 'profit',
        width: 100,
        align: 'center'
    },
    {
        name: 'sales',
        title: '本月销量',
        dataIndex: 'sales',
        key: 'sales',
        width: 100,
        align: 'center'
    },
    {
        name: 'status',
        title: '商品状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        align: 'center'
    },
    {
        name: 'supplier',
        title: '供应商',
        dataIndex: 'supplier',
        key: 'supplier',
        width: 100,
        align: 'center'
    },
    {
        name: 'action',
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 100,
        align: 'center'
    },
]);
const dataSource = ref([
    {
        id: 1,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        picture: '/assets/images/439577567.png',
        price: '¥13元',
        unit: '包',
        stock: 20,
        quantity: 2,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 2,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        picture: '/assets/images/439577567.png',
        price: '¥13元',
        unit: '包',
        stock: 20,
        quantity: 1,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 3,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        picture: '/assets/images/439577567.png',
        price: '¥13元',
        unit: '包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 4,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        picture: '/assets/images/439577567.png',
        price: '¥13元',
        unit: '包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 5,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        picture: '/assets/images/439577567.png',
        price: '¥13元',
        unit: '包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    }
]);

const rowSelection = ref({
    checkStrictly: false,
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
});
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .opertion,
    .search {
        display: flex;
        gap: 6px;
    }
}
</style>